<template>
  <div>
    <!-- 主页：最新音乐 推荐音乐  曾荣同学、尤雨晴同学 -->
    <!-- 将头部组件作为子组件使用 -->
    <index></index>
    <!-- 轮播效果 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(img, index) in bannerList" :key="index">
        <img :src="img.imageUrl" width="100%" alt="" />
      </van-swipe-item>
    </van-swipe>
    <!-- 推荐歌单 -->
    <div class="songlist-content">
      <div class="line">推荐歌单</div>
      <div
        v-for="(item, index) in songList"
        :key="index"
        class="songList"
        @click="goSonglist(item.id)"
      >
        <img :src="item.picUrl" width="118px" height="118px" />
        <p class="song-title">{{ item.name }}</p>
      </div>
    </div>
    <!-- 最新音乐 -->
    <div class="newset">
      <div class="line">最新音乐</div>
      <div
        v-for="(item, index) in newSongList"
        :key="index"
        class="song-div"
        :class="{ changeStyle: changeSelectStyle == index &&  item.id == id}"
        @click="changePlay(index)"
      >
       <!-- 歌曲名 -->
        <div class="song-name">
          {{ item.name }}
        </div>
        <!-- 播放图标 -->
        <div class="i">
          <van-icon
            name="play-circle-o"
            class="iconPlay"
            v-if="isPlay && item.id != id"
          />
          <van-icon name="pause-circle-o" class="iconPlay" v-else />
        </div>
        <br />
          
          <!-- 歌手名 -->
        <p class="artist-name">
          <i class="sq"></i>
          <span
            v-for="(artist, idx) in item.song.artists"
            :key="'artist' + idx"
            :class="{ changeStyle: changeSelectStyle == index }"
          >
            {{ artist.name }}
            <!-- 歌手是多人时，添加分割线 -->
            <span
              v-if="
                item.song.artists.length > 1 &&
                idx != item.song.artists.length - 1
              "
              >/</span
            >
          </span>
           - {{ item.name }}
        </p>
      </div>
    </div>
  </div>
</template>

<script>
//导入头部的组件
import index from "./index";

export default {
  data() {
    return {
      musicUrl: "", //歌曲链接
      id: "", 
      //防止推推荐歌曲的第一首歌变成灰色
      changeSelectStyle: -1,
      // 轮播图
      bannerList: [],
      // 歌单
      songList: [],
      // 最新音乐
      newSongList: [],
      //是否播放音乐
      isPlay: true,
      active: "",
    };
  },

  //组件列表
  components: {
    index,
  },

  //钩子函数
  created() {
    // 获取轮播图
    if (localStorage.getItem("banner")) {
      this.bannerList = JSON.parse(localStorage.getItem("banner"));
    } else {
      this.getBanner();
    }
    this.getSongList();
    this.getNewSong();
  },

  methods: {
    // 轮播图
    getBanner() {
      this.$http("/banner")
        .then((res) => {
          this.bannerList = res.data.banners;
          // 保存到localStorage中
          localStorage.setItem("banner", JSON.stringify(this.bannerList));
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 获取歌单
    getSongList() {
      this.$http("/personalized?limit=6")
        .then((res) => {
          this.songList = res.data.result;
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 获取最新音乐
    getNewSong() {
      this.$http("/personalized/newsong")
        .then((res) => {
          console.log(res.data.result);
          this.newSongList = res.data.result;
        })
        .catch((err) => {
          console.log(err);
        });
    },

    //切换音乐播放
    changePlay(index) {
      
            
      if (this.id == "") {
        this.changeSelectStyle = index;
        this.id = this.newSongList[index].id;
        console.log(this.id);
        //跳转到播放界面
        this.$router.push("/play/" + this.id);
      } else {
        this.id = "";
      }
    },

    playmusic() {
      console.log("211");
      this.$refs.audio[index].play();
      console.log("111");
    },

    //跳转到歌单界面
    goSonglist(id) {
      console.log("歌单id" + id);
      this.$router.push("/listSong/" + id);
    },

    changeActive($event) {
      console.log("g");
      $event.currentTarget.className = "active";
    },

    removeActive($event) {
      console.log("d");
      $event.currentTarget.className = "song-name";
    },
  },
};
</script>

<style scoped>

.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  text-align: center;
}

.line {
  height: 20px;
  line-height: 20px;
  border-left: 2px solid #f00;
  margin-top: 10px;
  padding-left: 10px;
  font-size: 18px;
  text-align: left;
}

.newset{
  margin-top:0;
}

.changeStyle {
  color: rgb(175, 169, 169);
}

.songlist-content {
  min-height: 374px;
}

.songList {
  float: left;
  width: 28%;
  margin: 10px 8px;
}

/* 最新音乐-单首音乐 */
.song-div {
  margin-top:10px;
  border-bottom: 1px solid #f4f4f4;
  padding-left: 10px;
}

.song-title {
  margin: 0;
  font-size: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
}

.song-name {
  display: inline;
  font-size: 16px;
  float: left;
}

.artist-name {
  font-size: 12px;
  color: #666;
  text-align: left;
}

.sq {
  display: inline-block;
  width: 14px;
  height: 10px;
  background-image: url("../../static/img/index_icon_2x.png");
  background-size: 186.75px 109.125px;
  background-position: 0 0;
}

.i {
  display: inline;
  float: right;
}

.iconPlay {
  font-size: 30px;
  color: grey;
  margin-right: 10px;
}

.play {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-image: url("../../static/img/index_icon_2x.png");
  background-size: 100% 100%;
  background-position: -48px 0;
  text-align: right;
}

.itemHover {
  background-color: black;
  color: red !important;
}

.active {
  display: inline;
  font-size: 16px;
  float: left;
  color: black;
  text-decoration: underline;
}
</style>